<template>
    <div class="container">
        <h1 class="title">星系介绍</h1>
        <div class="content">
            <img :src="form.imageUrl" alt="" class="img">
            <ul>
                <li class="list">
                    <div class="label">星系名称：</div>
                    <div class="value">{{ form.galaxyName }}</div> 
                </li>
                <li class="list">
                    <div class="label">星系介绍：</div>
                    <div class="value">{{ form.description }}</div> 
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { getDetail } from '@/utils/request.js';
import {mapState} from 'vuex'
export default {
    name: 'Detail',
    data() {
        return {
            form: {}
        }
    },
    created() {
        this.init(this.$route.query.id);
    },
    methods: {
        init(id) {
            this.getDetail(id);
        },
        getDetail(id) {
            getDetail(id).then(res => {
                if (res.code == '200') {
                    this.form = res.data;
                    this.form.imageUrl = this.form.imageUrl.replace('http://localhost:8901', this.baseUrl);
                    console.log(this.form);
                }
            })
        }
    },
    computed: {
        ...mapState(["baseUrl"]),
    }
}
</script>
<style lang="scss" scoped>
.container {
    padding: 0 10%;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    color: #000;
    background-image: url('https://img0.baidu.com/it/u=3374457457,1568455842&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500');
    background-repeat: no-repeat;
    background-size: 100%;

    .title {
        height: 10vh;
        background-color: #fff;
        line-height: 10vh;
    }

    .content {
        height: 90vh;
        background-color: #fff;
        padding: 30px;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        .img {
            width: 600px;
            height: 500px;
            border-radius: 8px;
            overflow: hidden;
        }
        ul {
            width: calc(100% - 600px);
            border: 1px solid #ccc;
            margin-left: 20px;
            box-sizing: border-box;
            border-radius: 8px;
            height: 500px;
            overflow-y: scroll;
        }
        ul::-webkit-scrollbar{
            display: none;
        }
        .list {
            display: flex;
            text-align: left;
            font-size: 14px;
            padding: 10px;
            box-sizing: border-box;
            .label {
                width: 80px;
                white-space: nowrap;
            }
            .value {
                flex: 1;
                white-space: pre-wrap;
                word-break: break-all;
            }
        }

    }
}
</style>